<template>
  <div class="hello">
    <div>{{msg}}</div>
    <div><button @click="getRequest">get</button></div>
    <div><button @click="postFormData">post data form</button></div>
    <div><button @click="postFormDataHasList">post data form list</button></div>
    <div><button @click="postJson">post JSON</button></div>
    <div><button @click="postUrlencode">post urlencode</button></div>
  </div>
</template>

<script>
export default {
  name: 'main',
  props: {
    msg: String
  },
  data(){
    return {
      aAndB:{a:1,b:'b'},
    }
  },
  methods: {
    getRequest() {
      //通常,get的参数需要使用params,
      this.$axios.get('/get',{params:{a:1,b:'b'}});

      //直接使用data中的对象也是没问题的
      // this.$axios.get('/get',{params:this.aAndB});
    },

    postFormData() {
      //通过qs来封装成表单数据FormData.此时如果使用params反而会接收不到数据
      let formData = this.$qs.stringify({a:1,b:'b'});
      this.$axios.post('/post-formData',formData);
    },

    postFormDataHasList() {
      //如果是list数据,那么后台可以用int[]来接受表单数据.注意需要不包含括号indices
      let formData = this.$qs.stringify({a:1,b:'b',c:[1,2,3]},{indices: false});
      this.$axios.post('/post-formData-list',formData);
    },

    postJson() {
      //发送json,直接传入js对象即可
      this.$axios.post('/post-json',this.aAndB);
      // this.$axios.post('/post-json-custom',this.aAndB);    //后台通过自定义对象(AAndB类型对象)也可以接受
      // this.$axios.post('/post-json-custom',{a:1,b:'b'});   //自己定义js对象而不是从data中取也可以

      //如果包装成json字符串则会发送x-www-form-urlencoded类型数据,而非json,因此后端无法接受
      // this.$axios.post('/post-json-object',JSON.stringify(this.aAndB));
    },

    postUrlencode() {
      //最后提一点urlencode,因为比较少见
      //不推荐的方法,使用URLSearchParams,兼容性有很大问题
      // let params = new URLSearchParams();
      // params.append("a","1");
      // params.append("b","b");
      // this.$axios.post('/post-urlencode',params);

      //或者你也可以套用FormData的写法方法,无论前端还是后端FormData和urlencode的写法都是一样的
      this.$axios.post('/post-urlencode',this.$qs.stringify({a:1,b:'b'},{indices: false}));
    },

  }
}
</script>

<style scoped>

</style>
